<template>
    <transition name="fade">
    <div style="overflow: hidden">
        <div class="header">
            <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
            <a class="center">收货地址</a>
        </div>
        <div class="list">
            <div class="item">
                <div class="info">
                    <p class="name"><span class="pull-left">收件人：Masky</span><span  class="pull-right">1300000000</span></p>
                    <p class="address"><small>广东省深圳市龙岗区xxxxxxx</small></p>
                </div>
                <div class="ctrl">
                    <input class="m-radio"  type="radio" name="ids" value="" id="rb"><label for="rb"></label>设为默认
                    <a class="btn-edit" v-on:click="edit(1)">编辑</a>
                    <a class="btn-del">删除</a>
                </div>
            </div>
            <div class="item">
                <div class="info">
                    <p class="name"><span class="pull-left">收件人：Masky</span><span  class="pull-right">1300000000</span></p>
                    <p class="address"><small>广东省深圳市龙岗区xxxxxxx</small></p>
                </div>
                <div class="ctrl">
                    <input class="m-radio"  type="radio" name="ids" value="" id="rb1"><label for="rb1"></label>设为默认
                    <a class="btn-edit">编辑</a>
                    <a class="btn-del">删除</a>
                </div>
            </div>
            <div class="bottom-panel">
                <a class="btn-add">新增收货地址</a>
            </div>
        </div>
    </div>
    </transition>
</template>

<script>
export default {
    name: 'address',
    data () {
        return {
			top_img:require('@/assets/b1.jpg'),
        }
    },
    methods:{
		edit:function (id)
		{
            this.$router.push("/address-edit")
		},
		back:function ()
		{
			this.$router.back();
		},
    }

}
</script>

<style scoped>
    .bottom-panel{

        position: fixed;
        height: 45px;
        width: 100%;
        bottom: 0;
        left:0;
    }
    .bottom-panel .btn-add{
        background: #E30000;
        color: #fff;
        height: 100%;
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 10px;
    }
    .list{
        margin-top: 60px;
    }
    .item{
        position: relative;
        border-bottom: 4px solid #f4f4f4;
    }
    .item .info{
        border-bottom: 1px dashed #eeee;
    }
    .item .name{
        overflow: hidden;
        padding: 10px 10px 5px 10px;
    }
    .item .address{
        padding: 0 10px 10px 10px;
    }
    .item .ctrl{
        padding: 8px;
        overflow: hidden;
    }
    .item .ctrl input{
        vertical-align: middle;
    }
    .item .btn-edit,.item .btn-del{
        padding: 4px 12px;
        border:1px solid #ccc;
        text-align: center;
        border-radius: 2px;
        float: right;
        margin-right: 10px;
        font-size: 0.9rem;
    }
    .m-radio+label{
        margin-right: 3px;
    }
</style>
